<template>
  <Darwer v-bind="$attrs" :inner-loading="useInnerLoading">
    <TabsMenu v-model:value="state.currentTabs" :options="state.tabsMenu" @change="changeTabsMenu"></TabsMenu>
    <Info :list="state.options" :detailed="state.detailed">
      <template #feeInfo>费用信息费用信息费用信息费用信息费用信息</template>
    </Info>
  </Darwer>
</template>
<script lang="ts">
  export default { name: 'OrderDetailed' }
</script>
<script setup lang="ts">
  const state = reactive({
    currentTabs: 'follow',
    tabsMenu: [
      { label: '基本信息', value: 'basis' },
      { label: '跟进记录', value: 'follow' },
    ],
    options: [
      {
        label: '订单信息',
        value: 'orderInfo',
        col: 12,
        isEdit: true,
        children: [
          {
            label: '订单来源',
            field: 'a',
            col: 12,
            format: (params?: { value?: number | string }) => {
              return params.value + '498423184'
            },
          },
          { label: '门店地点', field: 'b' },
          { label: '取车日期', field: 'c' },
        ],
      },
      {
        label: '费用信息',
        value: 'feeInfo',
        slotName: 'feeInfo',
      },
    ],
    detailed: {
      a: '门店',
      b: '广东省深圳市南山区某某路100号',
      c: '2025-09-19 15:44:52',
    },
  })
  const changeTabsMenu = (value: string | number) => {}

  // api
  const useInnerLoading = () => {
    return new Promise<void>((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 500)
    })
  }
</script>
